<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2019/6/25
  Time: 14:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Mobile Web-app fullscreen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Meta tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <!--Title-->
    <title></title>

    <!--CSS styles-->
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/animate.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/font-awesome.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/furniture-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/linear-icons.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/magnific-popup.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/owl.carousel.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/ion-range-slider.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/theme1.css" />
    <link rel="stylesheet" media="all" href="${pageContext.request.contextPath}/css/product.css"/>

    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600&amp;subset=latin-ext" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

</head>

<body>

<div class="page-loader"></div>

<div class="wrapper">

    <!--Use class "navbar-fixed" or "navbar-default" -->
    <!--If you use "navbar-fixed" it will be sticky menu on scroll (only for large screens)-->

    <!-- ======================== Navigation ======================== -->

    <nav class="navbar-fixed">

        <div class="container">

            <!-- ==========  Top navigation ========== -->

            <div class="navigation navigation-top clearfix">
                <ul>
                    <!--add active class for current page-->

                    <!--Language selector-->

                    <li class="nav-settings">
                        <a href="javascript:void(0);" class="nav-settings-value">简体中文</a>
                        <ul class="nav-settings-list">
                            <li>简体中文</li>
                            <li>ENG</li>
                        </ul>
                    </li>
                    <li><a href="javascript:void(0);" class="open-login"><i class="icon icon-user"></i></a></li>
                    <li><a href="javascript:void(0);" class="open-search"><i class="icon icon-magnifier"></i></a></li>
                    <li><a href="javascript:void(0);" class="open-cart"><i class="icon icon-cart"></i> <span id="pnum"></span></a></li>
                </ul>
            </div> <!--/navigation-top-->

            <!-- ==========  Main navigation ========== -->

            <div class="navigation navigation-main">

                <!-- Setup your logo here-->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot" class="logo"><img src="${pageContext.request.contextPath}/assets/images/logo.png" alt="" /></a>

                <!-- Mobile toggle menu -->

                <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>

                <!-- Convertible menu (mobile/desktop)-->

                <div class="floating-menu">

                    <!-- Mobile toggle menu trigger-->

                    <div class="close-menu-wrapper">
                        <span class="close-menu"><i class="icon icon-cross"></i></span>
                    </div>

                    <ul>
                        <li><a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot">首页</a></li>
                       <%-- <li><a href="${pageContext.request.contextPath}/html/product.jsp">产品详情</a></li>--%>
                        <li><a href="${pageContext.request.contextPath}/html/products-grid.jsp">产品列表</a></li>
                    </ul>
                </div> <!--/floating-menu-->
            </div> <!--/navigation-main-->

            <!-- ==========  Search wrapper ========== -->

            <div class="search-wrapper">

                <!-- Search form -->
                <input type="text" class="form-control" placeholder="Search..." id="searchfor" />
                <input type="button" class="btn btn-main btn-search" value="Go!" onclick="search()"></input>
            </div>

            <!-- ==========  Login wrapper ========== -->
            <%@ include file="login_part.jsp" %>
            <!-- ==========  Cart wrapper ========== -->

            <%@ include file="shopcar.jsp" %> <!--/cart-wrapper-->
        </div> <!--/container-->
    </nav>

    <!-- ======================== Main header ======================== -->

    <section class="main-header" style="background-image:url(${pageContext.request.contextPath}/assets/images/gallery-3.jpg)">
        <header>
            <div class="container">
                <h1 class="h2 title">Shop</h1><%--这里要商品分类--%>
                <ol class="breadcrumb breadcrumb-inverted">
                    <li><a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot"><span class="icon icon-home"></span></a></li>
                    <c:forEach items="parent" var="p">
                        <li><a href="#">vjvlhkj</a></li><%--这里要商品父类--%>
                    </c:forEach>
                </ol>
            </div>
        </header>
    </section>

    <!-- ========================  Icons slider ======================== -->

    <section class="owl-icons-wrapper">

        <!-- === header === -->

        <header class="hidden">
            <h2>Product categories</h2>
        </header>

        <div class="container">

            <div class="owl-icons">

                <!-- === icon item === -->


                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=沙发">
                    <figure>
                        <i class="f-icon f-icon-sofa"></i>
                        <figcaption>沙发</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=椅子">
                    <figure>
                        <i class="f-icon f-icon-chair"></i>
                        <figcaption>椅子</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=餐桌">
                    <figure>
                        <i class="f-icon f-icon-dining-table"></i>
                        <figcaption>餐桌</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=桌子">
                    <figure>
                        <i class="f-icon f-icon-table"></i>
                        <figcaption>桌子</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=书架">
                    <figure>
                        <i class="f-icon f-icon-bookcase"></i>
                        <figcaption>书架</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=床">
                    <figure>
                        <i class="f-icon f-icon-bedroom"></i>
                        <figcaption>床</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=床头柜">
                    <figure>
                        <i class="f-icon f-icon-nightstand"></i>
                        <figcaption>床头柜</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=儿童房">
                    <figure>
                        <i class="f-icon f-icon-children-room"></i>
                        <figcaption>儿童房</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=厨房">
                    <figure>
                        <i class="f-icon f-icon-kitchen"></i>
                        <figcaption>厨房</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=浴室">
                    <figure>
                        <i class="f-icon f-icon-bathroom"></i>
                        <figcaption>浴室</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=衣橱">
                    <figure>
                        <i class="f-icon f-icon-wardrobe"></i>
                        <figcaption>衣橱</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=鞋柜">
                    <figure>
                        <i class="f-icon f-icon-shoe-cabinet"></i>
                        <figcaption>鞋柜</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=办公家居">
                    <figure>
                        <i class="f-icon f-icon-office"></i>
                        <figcaption>办公家居</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=茶几">
                    <figure>
                        <i class="f-icon f-icon-bar-set"></i>
                        <figcaption>茶几</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=灯">
                    <figure>
                        <i class="f-icon f-icon-lightning"></i>
                        <figcaption>灯</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=抱枕">
                    <figure>
                        <i class="f-icon f-icon-carpet"></i>
                        <figcaption>抱枕</figcaption>
                    </figure>
                </a>

                <!-- === icon item === -->

                <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=配饰">
                    <figure>
                        <i class="f-icon f-icon-accessories"></i>
                        <figcaption>配饰</figcaption>
                    </figure>
                </a>

            </div><!--/owl-icons-->
        </div> <!--/container-->
    </section>

    <!-- ======================== Products ======================== -->

    <section class="products">
        <div class="container">

            <header class="hidden">
                <h3 class="h3 title">Product category grid</h3>
            </header>

            <div class="row">

                <!-- === product-filters === -->

                <div class="col-md-3 col-xs-12">
                    <div class="filters">
                        <!--Price-->
                        <div class="filter-box active">
                            <div class="title">Price</div>
                            <div class="filter-content">
                                <div class="price-filter">
                                    <input type="text" id="range-price-slider" value="" name="range" />
                                </div>
                            </div>
                        </div>
                        <!--Availability--><!--/filter-box-->
                        <!--Discount-->
                        <div class="filter-box active">
                            <div class="title">
                                Discount
                            </div>
                            <div class="filter-content">
                                    <span class="checkbox">
                                        <input type="radio" id="discountId1" name="discountPrice" checked="checked">
                                        <label for="discountId1">Discount price</label>
                                    </span>
                                <span class="checkbox">
                                        <input type="radio" id="discountId2" name="discountPrice">
                                        <label for="discountId2">Regular price</label>
                                    </span>
                            </div>
                        </div> <!--/filter-box-->
                        <!--Type-->
                        <!--/filter-box-->
                        <!--Material--><!--/filter-box-->
                        <!--close filters on mobile / update filters-->
                        <div class="toggle-filters-close btn btn-main">
                            Update search
                        </div>

                    </div> <!--/filters-->
                </div>

                <!--product items-->

                <div class="col-md-9 col-xs-12">
                    <div class="sort-bar clearfix">
                        <div class="sort-results pull-left">
                            <!--Showing result per page-->
                            <select>
                                <option value="1">10</option>
                                <option value="2">50</option>
                                <option value="3">100</option>
                                <option value="4">All</option>
                            </select>
                            <!--Items counter-->
                            <span>Showing all <strong>50</strong> of <strong>3,250</strong> items</span>
                        </div>
                        <!--Sort options-->
                        <div class="sort-options pull-right">
                            <span class="hidden-xs">Sort by</span>
                            <select>
                                <option value="1">Name</option>
                                <option value="2">Popular items</option>
                                <option value="3">Price: lowest</option>
                                <option value="4">Price: highest</option>
                            </select>
                            <!--Grid-list view-->
                            <span class="grid-list">
                                    <a href="products-grid.jsp"><i class="fa fa-th-large"></i></a>
                                    <a href="products-list.jsp"><i class="fa fa-align-justify"></i></a>
                                    <a href="javascript:void(0);" class="toggle-filters-mobile"><i class="fa fa-search"></i></a>
                                </span>
                        </div>
                    </div>

                    <div class="row">
                        <c:forEach items="${SubProduct}" var="p">
                            <div class="col-md-6 col-xs-6">
                                <article>
                                    <div class="info">
                                        <span class="add-favorite">
                                            <a href="javascript:void(0);" data-title="Add to favorites" data-title-added="Added to favorites list"><i class="icon icon-heart"></i></a>
                                        </span>
                                        <span>
                                            <a href="#productid${p.ID}"  class="mfp-open" data-title="Quick wiew"><i class="icon icon-eye"></i></a>
                                        </span>
                                    </div>
                                    <div class="btn btn-add">
                                        <i class="icon icon-cart" onclick="Padd('${p.ID}')"></i>
                                    </div>
                                    <div class="figure-grid">
                                        <span class="label label-info">-50%</span>
                                        <div class="image">
                                            <a href="#productid${p.ID}" class="mfp-open" onclick="show('${p.ID}','${p.productName}','${p.mainPic}','${p.category}','${p.description}','${p.minprice}','${p.maxprice}')">
                                                <img src="${pageContext.request.contextPath}/${p.mainPic}" alt="" width="360" />
                                            </a>
                                        </div>
                                        <div class="text">
                                            <h2 class="title h4"><a href="${pageContext.request.contextPath}/html/product.jsp">${p.productName}</a></h2>
                                            <sub>-</sub>
                                            <sup>$</sup><sup>${p.minprice}</sup>
                                            <span class="description clearfix">${p.description}</span>
                                        </div>
                                    </div>
                                </article>
                            </div>
                            <div class="popup-main mfp-hide" id="productid${p.ID}">

                                <!-- === product popup === -->

                                <div class="product">

                                    <!-- === popup-title === -->

                                        <%--放名字--%>
                                    <div class="popup-title">
                                        <div class="h1 title" id="put_name" style="font-size: 20px"></div>
                                    </div>

                                    <!-- === product gallery === -->
                                        <%--这里少子图--%>
                                    <div class="owl-product-gallery">
                                        <c:forEach items="${p.picList}" var="m">
                                            <img src="${pageContext.request.contextPath}/${m.path}" alt="" width="640" />
                                        </c:forEach>
                                    </div>

                                    <!-- === product-popup-footer === -->

                                    <div class="popup-table">
                                        <div class="popup-cell">
                                            <div class="price">
                                                <span class="h3" id="put_price"></span>
                                            </div>
                                        </div>
                                        <div class="popup-cell">
                                            <div class="popup-buttons">
                                                <a href="javascript:void(0);" onclick="showdetail()"><span class="icon icon-eye"></span> <span class="hidden-xs">View more</span></a>
                                                <a href=""><span class="icon icon-cart"></span> <span class="hidden-xs">Buy</span></a>
                                            </div>
                                        </div>
                                    </div>

                                </div> <!--/product-->
                            </div>
                        </c:forEach>
                    </div><!--/row-->
                    <!--Pagination-->
                    <div class="pagination-wrapper">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                </div> <!--/product items-->

            </div><!--/row-->
            <!-- ========================  Product info popup - quick view ======================== -->

             <!--popup-main-->
        </div><!--/container-->
    </section>

    <!-- ================== Footer  ================== -->

    <%@ include file="foot.jsp" %>

</div> <!--/wrapper-->


<!--JS files-->
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.magnific-popup.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.owl.carousel.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.ion.rangeSlider.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.isotope.pkgd.js"></script>
<script src="${pageContext.request.contextPath}/js/main.js"></script>
<script>
    var ID = '';
    var PName='';
    var PImage='';
    var PID='';
    var Desc='';

function show(id,name,image,category,desc,iprice,aprice){
    ID = id;
    PName=name;
    PImage=image;
    PID=category;
    Pmprice=iprice;
    Paprice=aprice;
    Desc=desc;
    $('#put_name').html(PName);
    $('#put_price').html("$"+Pmprice+"<small>"+Paprice+"</small>");
}

function showdetail(){
    location.href = "${pageContext.request.contextPath}/GoodsServlet?method=DetailProduct&ProductID="+ID+"&PID=" +PID;
}
function search() {
    var Searchfor = $("#searchfor").val();
    location.href = "${pageContext.request.contextPath}/GoodsServlet?method=search&&ProductName="+Searchfor+"&&perpage=5&&page=1";
}
/*添加到购物车中*/
function Padd(id) {

    $.get(path+'/addShopcar',{method:"add",ID:id},function (data) {
        alert("添加成功");

    })
}
</script>
</body>
</html>


